/**
 * @author BoLiang
 */
if (typeof accedo === "undefined") {
	accedo = {};
}
if (typeof accedo.achievement === "undefined") {
	accedo.achievement = {};
}

accedo.achievement.achiPortalCampShow = {
	oldOnkeydownFunc : null,
	campShowAchiAjaxNode : null,
	campShowTitleAjaxNode : null,
	divCurrID : 0, 
	divLength : 0,
	campShowAchiInnerNode : null,
	moveCount : 0,
	campName : null,
	tickTrue : 0,
	campSn : null,
	campEnd : null,

	init : function() {
		this.oldOnkeydownFunc = null; 
		this.campShowAchiAjaxNode = null;
		campShowTitleAjaxNode = null;
		this.divCurrID = 0; 
		this.divLength = 0;
		this.campShowAchiInnerNode = null;
		this.moveCount = 0;
		this.campName = null; 
		this.tickTrue = 0;
		this.campSn = null;
		this.campEnd = null;
	},

	appendPage : function(camp_name, camp_sn, camp_end, username) {
		this.init(); 
		this.campName = camp_name; 
		this.campSn = camp_sn;
		this.campEnd = camp_end;
		var titleNode = this.createTitleAjaxNode(); 
		var achiAjaxNode =  this.createAchiAjaxNode();
		this.createMainNode(titleNode, achiAjaxNode); 

		this.oldOnkeydownFunc = document.onkeydown;
		this.initAchiCtnNode(camp_sn, username);
		document.onkeydown = function(e) {
			accedo.achievement.achiPortalCampShow.keysControl(e);
		};
	},

	removePage : function() {
		var campShowMainNode = document.getElementById("campShowMainNode");
		var bodyNode = document.getElementsByTagName("body")[0];
		bodyNode.removeChild(campShowMainNode);
		document.getElementById("achiPortalMain").style.opacity = null;
		document.onkeydown = this.oldOnkeydownFunc;
	},

	createTitleAjaxNode : function() {
		this.campShowTitleAjaxNode = document.createElement("div");
		this.campShowTitleAjaxNode.id = "campShowTitleAjaxNode";
		return this.campShowTitleAjaxNode;  
	},

	createAchiAjaxNode : function() {
		this.campShowAchiAjaxNode = document.createElement("div");
		this.campShowAchiAjaxNode.id = "campShowAchiAjaxNode";

		return this.campShowAchiAjaxNode;
	},

	createMainNode : function(titleNode, achiNode) {
		var campShowMainNode = document.createElement("div");
		campShowMainNode.id = "campShowMainNode";
		campShowMainNode.appendChild(titleNode);
		campShowMainNode.appendChild(achiNode);

		var bodyNode = document.getElementsByTagName("body")[0];
		bodyNode.appendChild(campShowMainNode);

	},

	initAchiCtnNode : function(camp_sn, username) {
		dwr.engine.setPreHook(this.preAchiCtnHook); 
		dwr.engine.setPostHook(this.postAchiCtnHook);
		AchiService._path = "http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/dwr";
		AchiService.getJsonAchisByCampsnAndUsername(camp_sn, username, 
			this.initAchiCtnNodeCallback);
	},

	preAchiCtnHook : function() {
	},

	postAchiCtnHook : function() {
	},

	initAchiCtnNodeCallback : function(jsonData) {
		// var jsonData = eval("(" + data + ")");
		accedo.achievement.achiPortalCampShow.campShowAchiAjaxNode.appendChild(
			accedo.achievement.achiPortalCampShow.createAchiCtnNode(jsonData));

		accedo.achievement.achiPortalCampShow.campShowTitleAjaxNode.appendChild(
			accedo.achievement.achiPortalCampShow.createTitleNode());

	},

	createTitleNode : function() {
		var campShowTitleNode = document.createElement("div");
		campShowTitleNode.id = "campShowTitleNode";

		var campShowUpTitleNode = document.createElement("div");
		campShowUpTitleNode.id = "campShowUpTitleNode";

		var campShowTitleLogoNode = document.createElement("div");
		campShowTitleLogoNode.id = "campShowTitleLogoNode";

		campShowTitleLogoNode.innerHTML= "<img width=100% height=100% src='http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/images/campImages/" 
										+ this.campSn
										+ ".png' />";

		var campShowTitleContNode = document.createElement("div");
		campShowTitleContNode.id = "campShowTitleContNode";
		campShowTitleContNode.innerHTML 
			= "<font size=7px color=white>"
			+ this.campName
			+ "</font><br />"
			+ "<font size=5px color=white>Achievements Unlocked : "
			+ this.tickTrue
			+ " &nbsp&nbspTotal : "
			+ this.divLength
			+ "</font>";

		campShowUpTitleNode.appendChild(campShowTitleLogoNode);
		campShowUpTitleNode.appendChild(campShowTitleContNode);

		var campShowDownTitleNode = document.createElement("div");
		campShowDownTitleNode.id = "campShowDownTitleNode";
		campShowDownTitleNode.innerHTML = "<font size=5px color=white>Deadline : "
			+ this.campEnd
			+ "</font>";

		campShowTitleNode.appendChild(campShowUpTitleNode);
		campShowTitleNode.appendChild(campShowDownTitleNode);

		return campShowTitleNode; 
	},

	createAchiCtnNode : function(jsonData) {
		var campShowAchiCtnNode = document.createElement("div");
		campShowAchiCtnNode.id = "campShowAchiCtnNode";


		
		campShowAchiCtnNode.appendChild(this.createAchiInner(jsonData));
		return campShowAchiCtnNode;
	},

	createAchiInner : function(jsonData) {
		this.campShowAchiInnerNode = document.createElement("div");
		this.campShowAchiInnerNode.id = "campShowAchiInnerNode";
		this.divLength = jsonData.campAchis.length; 
		this.campShowAchiInnerNode.style.height = this.divLength * 100 + "px";
		
		for (var divNum = 0; divNum < this.divLength; divNum++) {
			var campShowAchiCellNode = document.createElement("div");
			campShowAchiCellNode.id = "campAchi" + divNum; 
			topValue = (divNum + 1) * 6;
			campShowAchiCellNode.style.top = topValue + "px";
			campShowAchiCellNode.className = "campShowAchiCellNode";

			if (divNum == 0) {
				campShowAchiCellNode.style.borderColor = "white";
				campShowAchiCellNode.style.backgroundColor = "#FF6600";
			}

			// Star Node
			var starNode = document.createElement("div");
			starNode.id = "campShowAchiStarNode"; 
			starNode.innerHTML = "<img width=100% height=100% src='http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/images/appImages/" 
				+ jsonData.campAchis[divNum].app_sn 
				+ ".png' />"
			campShowAchiCellNode.appendChild(starNode);

			//app name Node
			var appNameNode = document.createElement("div");
			appNameNode.id = "campShowAchiAppNameNode"; 
			appNameNode.className = "campShowAchiNameNode";
			appNameNode.innerHTML = "<font color=white>" + jsonData.campAchis[divNum].app_name + "</font>";
			campShowAchiCellNode.appendChild(appNameNode);

			//interval Node
			var intervalNode = document.createElement("div");
			intervalNode.id = "campShowAchiIntervalNode";
			intervalNode.innerHTML = "<font color=white>|</font>";
			campShowAchiCellNode.appendChild(intervalNode);

			//achi name Node
			var achiNameNode = document.createElement("div");
			achiNameNode.id = "campShowAchiAchiNameNode";
			achiNameNode.className = "campShowAchiNameNode";
			achiNameNode.innerHTML = "<font color=white>" + jsonData.campAchis[divNum].achi_name + "</font>"
								   + "<hidden id=hidden" + divNum + " value='" + jsonData.campAchis[divNum].achi_sn + "' />";
			campShowAchiCellNode.appendChild(achiNameNode);

			//tick Node
			var tickNode = document.createElement("div");
			tickNode.id = "campShowAchiTickNode"; 
			tickNode.innerHTML = "<img width=100% height=100% src='http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/images/otherImages/achiTick.png' />";
			if (jsonData.campAchis[divNum].state == "true") {
				tickNode.style.visibility = "visible";
				this.tickTrue++; 
			} else {
				tickNode.style.visibility = "hidden"; 
			}
			campShowAchiCellNode.appendChild(tickNode);

			//achi name Node
			var achiNameNode = document.createElement("div");

			this.campShowAchiInnerNode.appendChild(campShowAchiCellNode); 
		}


		return this.campShowAchiInnerNode; 
	},



	moveCurrDiv : function(direction) {
		var divOldNode = document.getElementById("campAchi" + this.divCurrID);
		divOldNode.style.borderColor = null;
		divOldNode.style.backgroundColor = null;

		if (direction == "down" && this.divCurrID < this.divLength - 1) {
			this.divCurrID = this.divCurrID + 1;
			
			if (this.moveCount == 3) {
				var topValue = this.campShowAchiInnerNode.offsetTop - 100;
				this.campShowAchiInnerNode.style.top = topValue + "px";

			} else {
				this.moveCount++;
			}

		} else if (direction == "up" && this.divCurrID > 0) {
			this.divCurrID = this.divCurrID - 1;

			if (this.moveCount == 0) {
				var topValue = this.campShowAchiInnerNode.offsetTop + 100;
				this.campShowAchiInnerNode.style.top = topValue + "px";

			} else {
				this.moveCount--;
			}
		}

		var divNewNode = document.getElementById("campAchi" + this.divCurrID);
		divNewNode.style.borderColor = "white";
		divNewNode.style.backgroundColor = "#FF6600";
	},

	keysControl : function(e) {
		e = window.event || e;
		switch (e.keyCode) {
		// left button
		case 37:
			this.moveCurrDiv("left");
			break;
		// up button
		case 38:
			this.moveCurrDiv("up");
			break;
		// right button
		case 39:
			this.moveCurrDiv("right");
			break;
		// down button
		case 40:
			this.moveCurrDiv("down");
			break;

		// enter button
		case 13:
			document.getElementById("campShowMainNode").style.opacity = "0.4";
			var hiddenInputNode = document.getElementById("hidden"
					+ this.divCurrID);
			var achiSnValue = hiddenInputNode.getAttribute("value");
			accedo.achievement.achiContShow.openPage(achiSnValue);
			break;
		// esc button
		case 27:
			this.removePage();
			break;
		default:
			break;
		}
	}


}